<template>
  <div class="addEdit-container">
    <div class="edit-box">
      <!-- head return-->
      <div class="addEdit-head">
        <van-nav-bar :title="$t('h.accPage.address.addAdd.title')" style="background: #ededed">
          <template #left>
            <van-icon name="arrow-left" size="24" color="black" @click="$router.push({ name: 'addlist', query: $route.query })" />
          </template>
        </van-nav-bar>
      </div>

      <div class="addEdit">
        <van-address-edit :area-list="areaList" :address-info="newAddress" show-postal show-delete show-set-default show-search-result :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete" @change-detail="onChangeDetail" />
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'

export default {
  name: 'AddEdit',
  data() {
    return {
      searchResult: [],
      areaList,
      // 新增、更改的地址数据
      newAddress: this.$route.params.item
    }
  },
  methods: {
    // 保存新地址数据
    onSave(newVal) {
      if (this.newAddress.id === undefined) {
        this.$msg.toast('添加失败')
      } else {
        this.$msg.toast('修改失败')
      }
    },
    // 删除地址数据
    onDelete(newVal) {
      this.$msg.toast('删除失败')
    },
    // 详细地址历史记录
    onChangeDetail(val) {
      // if (val) {
      //   this.searchResult = [
      //     {
      //       name: '黄龙万科中心',
      //       address: '杭州市西湖区'
      //     }
      //   ]
      // } else {
      //   this.searchResult = []
      // }
    }
  }
}
</script>

<style lang="less" scoped>
.addEdit-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}
/deep/ .van-address-edit__buttons {
  .van-button--danger {
    background-color: #ffbf05;
    border: none;
    border-radius: 9px;
  }
  .van-button--default {
    border-radius: 9px;
  }
}
</style>
